/**
 * Created by wot_jiangguowen on 2017/8/17.
 */
import React, { Component } from 'react';
import { Layout, Menu,color,Icon,Tabs,Button} from 'element-react';
import '../style/commen.css';
import ReactDOM from 'react-dom';


export class Filter extends Component {
    onOpen() {

    }
    onClose() {

    }
    constructor(props) {
        super(props);
        this.state={
            parent:0,
            list:[1,2,3,4,5],
            icon:true
        };
        this.handleNames=this.handleNames.bind(this)
    }
    handleProps(){
    }
    handleNames(tab){
        console.log(tab.props.name);
        console.log(this.props.dataName)
        this.props.dataName=tab.props.name
        return(tab.props.name);
    }
    handleIconClick(){
        const {icon}=this.state
        //console.log(icon)
        this.setState({icon:!icon})
    }
    render() {
        return (
            <div>
                <Layout.Row>
                    <Layout.Col span={12} style={{display:this.state.icon===true?'block':'none'}}>
                        <div className="grid-content bg-blue">
                            <Icon name='message'/>
                            <p>我申请的</p>
                        </div>
                    </Layout.Col>
                    <Layout.Col span={12} style={{display:this.state.icon===true?'block':'none'}}>
                        <div className="grid-content bg-blue">
                            <Icon name='edit'/>
                            <p>我处理的</p>
                        </div>
                    </Layout.Col>

                    <Layout.Col className='arrow'span={24}>
                        <i className={this.state.icon===true?"el-icon-arrow-down":"el-icon-arrow-up"} onClick={this.handleIconClick.bind(this)}></i>
                    </Layout.Col>
                    <Layout.Col span={24} className="abc">

                        <Tabs activeName="1" onTabClick={ this.handleNames }>
                            <Tabs.Pane label="已办结" name="1" className="el-icon-edit">
                                {this.state.list.map((entry,index)=>(
                                <Tab1 key={`list-${index}`}></Tab1>
                            ))}
                            </Tabs.Pane>
                            <Tabs.Pane label="处理中" name="2" className="el-icon-edit">
                                {this.state.list.map((entry,index)=>(
                                    <Tab1 key={`list-${index}`}></Tab1>
                                ))}
                            </Tabs.Pane>
                            <Tabs.Pane label="已退回" name="3" className="el-icon-edit">
                                {this.state.list.map((entry,index)=>(
                                    <Tab1 key={`list-${index}`}></Tab1>
                                ))}
                            </Tabs.Pane>

                        </Tabs>
                    </Layout.Col>
                </Layout.Row>

            </div>

        );
    }
}




//子组件

export class Tab1 extends Component{
    constructor(props){
        super(props)

    }
    render(){
        return(
            <div className="wrap">
                <div className="wraper">
                    <div className="wraper_item1">测试</div>
                    <div className="wraper_item2">
                        <p>处理中</p>
                        <p>2.00元</p>
                    </div>
                </div>
                <div className="wraper wraperBorder">
                    <div className="wraper_item3">2017-08-22 14:01</div>
                    <div className="wraper_item3">
                        <p>当前处理人：<span>张五零</span></p>
                    </div>
                </div>
            </div>
        )
    }
}